import React, { useEffect, useState } from 'react'
import { Card, Table, Space, Button,Select,Input } from "antd"
import { findAllProductApi, findProductBySearchDataApi } from "../../../apis/productApi"
import {Link,useNavigate} from "react-router-dom"
export default function ProductList() {
  const [dataSource, setDataSource] = useState([])
  const [searchType,setSearchType] = useState("")
  const [searchData,setSearchData] = useState("")
  const navigate = useNavigate()
  useEffect(() => {
    fetchData()
  }, [])
  const fetchData = async () => {
    const res = await findAllProductApi()
    setDataSource(res.data.data)
  }
  const searchEvent =async ()=>{
    const res = await findProductBySearchDataApi({searchType,searchData})
    console.log(res);
    setDataSource(res.data.data)
  }
  const gotoAddPage = ()=>{
    navigate("/home/productadd",{replace:true})
  }
  const gotoUpdatePage = (id)=>{
    console.log(id);
    // navigate(`/home/productupdate?id=${id}&name=xiaowang`)
    navigate(`/home/productupdate`,{
      state:{id}
    })
    // navigate(`/home/productupdate/${id}`)
  }
  // 表头的数据
  const columns = [
    {
      title: '商品名字',
      dataIndex: 'name',
      align: "center"
    },
    {
      title: '商品描述',
      dataIndex: 'title',
      align: "center"
    },
    {
      title: '商品价格',
      dataIndex: 'price',
      align: "center"
    },
    {
      title: '商品类型',
      dataIndex: 'type',
      align: "center",
      render: (type, p2) => {
        //后端的数据，有1-2条，没有type字段
        if (type) {
          return type.name
        } else {
          return "暂无分类"
        }
      }
    },
    {
      title: '商品状态',
      dataIndex: 'state',
      align: "center",
      render: (state, p2) => {
        if (state == 0) {
          return <Button type='primary'>点击上架</Button>
        } else {
          return <Button type='dashed'>点击下架</Button>
        }
      }
    },
    {
      title: '操作',
      render: (p1, p2) => {
        return (
          <Space size="middle">
            <Button onClick={()=>gotoUpdatePage(p1._id)} type='primary'>修改</Button>
            <Button type='default'>删除</Button>
          </Space>
        )
      }
    },
  ];
  return (
    <>
      <div style={{padding:"20px 0px"}}>
        <Select 
        style={{width:"180px"}}
        showSearch
        onChange={value=>setSearchType(value)}
        options={[
          {value:"name",label:"按照名字搜索"},
          {value:"title",label:"按照描述搜索"}
        ]}
        />

        <Input onChange={event=>setSearchData(event.target.value)} style={{width:"180px",margin:"0px 20px"}} placeholder='请输入搜索内容'></Input>
        <Button onClick={searchEvent}>搜索</Button>
      </div>
      <Card
        title={"商品列表"}
        extra={<Button onClick={gotoAddPage} type='dashed'>添加</Button>}
        style={{
          width: "100%",
        }}
      >
        <Table
          dataSource={dataSource}
          columns={columns}
          rowKey="_id"
          bordered={true}
          loading={false}
          pagination={{ defaultCurrent: 1, defaultPageSize: 6, showSizeChanger: true, pageSizeOptions: [3, 6, 9], showQuickJumper: true }}

        />
      </Card>
    </>
  )
}
